<template>
  <section>
    <el-table
      ref="table"
      v-loading="tableLoading"
      size="small"
      :empty-text="configData.initNoQuery ?' ':'暂无数据'"
      :data="tableData"
      style="width: 100%"
      border
      :header-cell-style="{background:'#f2f3f7', color: '#333'}"
      @selection-change="handleSelectionChange"
      @[event]="eventChange"
    >
      <el-table-column
        v-if="configData.tableConfig && configData.tableConfig.selection"
        type="selection"
      />
      <el-table-column
        v-if="configData.tableConfig && configData.tableConfig.index"
        type="index"
        width="50"
        label="序号"
        align="center"
      />
      <el-table-column
        v-for="(item, key) in tableColumn"
        :key="key"
        :prop="key"
        header-align="center"
        :label="item.name"
        :width="item.width"
        :align="item.align"
        :min-width="item.min_width"
      >
        <template slot-scope="scope">
          <div v-if="item.widget">
            <div
              :is="item.widget"
              v-model="scope.row[key]"
              :default-value="item.defaultValue || ''"
              :config-data="item"
              :class="scope.row._classType"
              @change="tableInputChange(item, scope, key)"
              @input="tableInputChange(item, scope, key)"
            />
          </div>
          <div
            v-else-if="item.renderCallback"
            v-html="item.renderCallback(scope, key)"
          />
          <div v-else>
            {{ scope.row[key] }}
          </div>
        </template>
      </el-table-column>
      <slot name="table_operation" />
    </el-table>
  </section>
</template>

<script>
import commonComponents from '../component'

function allComponents() {
  return Object.assign({}, commonComponents)
}

export default {
  name: 'TableList',
  components: allComponents(),
  props: {
    configData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableColumn: {
      type: Object,
      default: function() {
        return {}
      }
    },
    tableLoading: {
      type: Boolean,
      default: function() {
        return false
      }
    }
  },

  data() {
    return {
    }
  },
  computed: {
    event: function() {
      if (this.configData.tableConfig.event) this.eventChange(this.tableData[0])
      return this.configData.tableConfig.event || null
    }
  },
  methods: {
    // 自定义表头
    // renderHeader(h, column, $index, item) {
    //   const l = column.label.length
    //   const f = 12
    //   column.minWidth = f * l + 50
    //   if (this.configData.haveNotOperationButton) {
    //     if (!item.width) {
    //       item.width = column.minWidth
    //     } else {
    //       column.minWidth = item.width
    //     }
    //   }
    //   if (item.prompt) {
    //     return (
    //       <span>
    //         <span>{column.label} </span>
    //         <el-tooltip class='item' effect='light' content={item.prompt.title} placement='bottom'>
    //           <i class={item.prompt.class}></i>
    //         </el-tooltip>
    //       </span>
    //     )
    //   } else {
    //     return (
    //       <span>
    //         <span>{column.label}</span>
    //       </span>
    //     )
    //   }
    // },
    // 多选回调
    handleSelectionChange(val) {
      /*
      * this.$refs.table.toggleRowSelection(row) 确定勾选上的内容
      * this.$refs.table.clearSelection() 清空所有的勾选
      * */
      this.$emit('selectionChange', val)
    },
    eventChange(val) {
      this.$emit('eventChange', val)
    }
  }
}
</script>

<style scoped>
</style>
